<template>
  <div class="personDetai">
    <p class="title">添加/编辑购票人</p>
    <div class="header">
      <!-- 联系人卡片 -->
      <van-contact-card
        :type="cardType"
        :name="currentContact.name"
        :tel="currentContact.tel"
        @click="showList = true"
      />
      <!-- 联系人列表 -->
      <van-popup v-model="showList" position="bottom" :lock-scroll="true">
        <van-contact-list
          v-model="chosenContactId"
          :list="list"
          @add="onAdd"
          @edit="onEdit"
          @select="onSelect"
        />
      </van-popup>

      <!-- 联系人编辑 -->
      <van-popup v-model="showEdit" position="bottom">
        <van-contact-edit
          :contact-info="editingContact"
          :is-edit="isEdit"
          @save="onSave"
          @delete="onDelete"
        />
      </van-popup>
    </div>
  </div>
</template>
<script>
import { ContactCard, ContactList, ContactEdit, Popup, Toast } from "vant";
import axios from "axios";
import {getcontactList} from '@/service/common.js'
// import {getData,add ,edit,saveFrom,Delete,} from '@/api/common.js'
export default {
  name: "personDetail",
  //   vant特殊的注册方式
  components: {
    [ContactCard.name]: ContactCard,
    [ContactList.name]: ContactList,
    [ContactEdit.name]: ContactEdit,
    [Popup.name]: Popup,
    [Toast.name]: Toast
  },
  data() {
    return {
      currentContact:[],
      chosenContactId: null,
      editingContact: {},
      showList: false,
      showEdit: false,
      isEdit: false,
      list: [],
      instance: null //axios实例
    };
  },
  computed: {
    cardType() {
      return this.chosenContactId !== null ? "edit" : "add";
    },
  },
  created() {
    // getData().then((res)=>{
    //   console.log(res)
    // })
    // 创建axios实例
    this.instance = axios.create({
      baseURL: "http://localhost:9000/api",
      timeout: 2000
    });
    this.getDataList(); //获取联系人列表数据
  },
  methods: {
    // async getDataList(){
    //   let res = await
    //   this.$Http.getcontactList()
    //   this.list = res.data;

    // },
    getDataList() {
      this.instance
        .get("/contactList")
        .then(res => {
          this.list = res.data.data;
        })
        .catch(err => {
          this.$toast("加载出错");
        });
    },
    // 添加联系人
    onAdd() {
      this.editingContact = { id: this.list.length };
      this.isEdit = false;
      this.showEdit = true;
    },

    // 编辑联系人
    onEdit(item) {
      this.isEdit = true;
      this.showEdit = true;
      this.editingContact = item;
    },

    // 选中联系人
    onSelect(info) {
      this.showList = false;
      this.currentContact = info;
    },

    // 保存联系人
    onSave(info) {
      // console.log(info);
      // id: 9
      // name: "含"
      // tel: "14567890987"
      // this.showList = false;
      //判断是否为编辑
      if (this.isEdit) {
        // 编辑保存
        this.instance
          .put("/contact/edit", info)
          .then(res => {
            if (res.data.code === 200) {
              this.$toast("编辑成功");
              this.isEdit = false; // 编辑页面
              this.showEdit = false;
              this.showList = false; //列表数据
              this.getDataList(); //获取联系人列表数据
            }
          })
          .catch(err => {
            this.$toast("编辑失败");
          });
      } else {
        //新建保存
        this.instance
          .post("/contact/new/json", info)
          .then(res => {
            if (res.data.code === 200) {
              this.$toast("新建成功");
              this.isEdit = false; //隐藏
              this.showEdit = false;
              this.showList = false;

            }
          })
          .catch(err => {
            this.$toast("新建失败");
          });
      }
      this.getDataList(); //获取联系人列表数据
      this.currentContact = info;
    },

    // 删除联系人
    onDelete(info) {
      this.instance
        .delete("/contact?id=" + info.id)
        .then(res => {
          if (res.data.code === 200) {
            this.isEdit = false; //隐藏
            this.showEdit = false;
              this.showList = false;

            this.$toast("删除成功");
          }
        })
        .catch(err => {
          this.$toast("删除失败");
        });
      this.getDataList(); //获取联系人列表数据
    }
    //取消
  }
};
</script>
<style scoped>
.title {
  line-height: 22px;
  background: #ffffff;
  text-align: center;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid #eeeeee;
  top: 48px;
  left: 4px;
  color: rgb(17, 17, 17);
  position: absolute;
}
.header {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 75px;
  box-shadow: #cccccc 0px 2px 8px 1px;
}
.header >>> .van-button--danger {
  background: #00bcd4;
  border-color: #00bcd4;
}
.header .van-contact-card::before {
  background: #eeeeee;
  height: 1px;
}
.header .van-contact-card--add .van-cell__left-icon {
  color: #00bcd4;
}
.van-contact-list_add {
  z-index: 0;
}
.van-popup {
  height: 100%;
}
</style>